﻿
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="weadmin-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">基础设置</a>
        <a>
            <cite>权限设置</cite>
        </a>
    </span>
</div>
<table class="layui-table">
    <thead>
        <tr>
            <th>标题</th>
            <th>图标</th>
            <th>等级</th>
            <th width="40%">授权角色</th>
            <th width="60" style="text-align: center;">操作</th>
        </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
@section scripts{
    <script id="tpl" type="text/html">
        <tr>
            <td style="padding-left:{{d.level*30}}px;">
                {{d.title}}
            </td>

            <td>
                <i class="layui-icon">{{=d.icon}}</i>
            </td>
            <td>{{d.level}}级菜单</td>
            <td>
                {{# layui.each(d.roles,function(index,item){ }}
                {{item.roleName}}
                {{# }); }}
            </td>
            <td align="center">
                {{# if(d.children.length==0){ }}
                <a title="设置权限" href="javascript:;" name="btnSet" value="{{d.id}}" pid="{{d.pId}}">
                    <i class="layui-icon font24">&#xe716;</i>
                </a>
                {{# } }}
            </td>
        </tr>
    </script>
    <script>
        layui.use(['element', 'layer', 'laytpl'], function () {
            var $ = layui.$;
            var laytpl = layui.laytpl;
            var layer = parent.layer;
            GetMenus();
            parent.GetMenus = GetMenus;
            function GetMenus() {
                $('#tbody').empty();
                var index = layer.load(2);
                $.get('/RoleMenu/GetMenusAsync',
                    function (res) {
                        layer.close(index);
                        if (res.status == 200) {
                            var list = res.data;
                            if (list.length > 0) {
                                layui.each(list,
                                    function (i, item) {
                                        GetTree(item);
                                    })
                            } else {
                                $('#tbody').html('<tr><td colspan=5 align="center">暂无数据</td></tr>');
                            }
                        }
                    })
            }

            function GetTree(item) {
                var getTpl = tpl.innerHTML;
                laytpl(getTpl).render(item,
                    function (html) {
                        $('#tbody').append(html);
                        if (item.children) {
                            layui.each(item.children,
                                function (index, _item) {
                                    GetTree(_item);
                                })
                        }
                    });

            }
            $('#tbody').on('click', 'a[name=btnSet]', function () {
                var value = $(this).attr('value');
                layer.open({
                    type: 2,
                    area: ['500px', '400px'],
                    fix: false, //不固定
                    maxmin: true,
                    shade: 0.4,
                    title: '权限设置',
                    content: '/RoleMenu/Set?Id=' + value,
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        var body = layer.getChildFrame('body', index);
                        $(body).find('#save').click();
                    }
                });
            })
        });
    </script>
}
